<template>
  <Card class="role_recharge">
  <div>
      <Form  label-position="left" :label-width="80">
        <Form-item label="游戏id" prop="userId">
            <Input v-model="userId" placeholder="请输入游戏id"></Input>
        </Form-item>
        <Form-item label="游戏名字" prop="userName">
            <Input v-model="userName"  placeholder="请输入游戏名字"></Input>
        </Form-item>
        <Form-item label="金额" prop="amount">
            <Input v-model="amount"  placeholder="请输入金额"></Input>
        </Form-item>
        <Button  class="add-group" type="primary" @click="onSubmit">充值</Button>
      </Form>
  </div>
  </Card>
</template>
<script>

export default {
  data () {
    return {
      userId: '',
      userName: '',
      amount: ''
    }
  },
  created () {
    // console.log('created')
  },
  methods: {
    onSubmit () {
      if (this.userId === '' && this.userName === '') {
        this.$Message.error('游戏id和游戏名字不能全都为空!!!')
        return
      }
      if (this.amount === '') {
        this.$Message.error('金额不能为空!!!')
        return
      }
      // let tAmount = parseInt(this.amount)
      this.$Message.error('待开发,服务端为开发接口!!!')
    }
  },
  computed: {
    // console.log('computed')
  }
}
</script>
<style scoped>
.role_recharge {
  width: 500px;
  height: 240px;
  margin: 60px auto;
}

.add-group{
  float: right;
}
</style>
